<template>
    <h2>插槽</h2>
    <div class="box">
        <!-- <category>
            <template v-slot:s2>
                <h1>具名插槽</h1>
            </template>
<template #s1>
                <ul>
                    <li>吧吧吧</li>
                    <li>哈哈哈哈</li>
                    <li>llll</li>
                </ul>
            </template>
</category> -->
        <!-- <category />
        <category /> -->
        <game>
            <template v-slot="params">
                <!-- 可以解构  v-slot={youxi} 这样下边就可以直接使用youxi 不用params.youxi -->
                <ul>
                    <li v-for="item in params.youxi">{{ item.name }}</li>
                </ul>

            </template>

        </game>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import category from './category.vue';
import game from './game.vue';
</script>
<style scoped>
.box {
    display: flex;
    justify-content: space-around;
    width: 80%;
    padding: 10px;
    margin: 0 auto;
    background: gray;
}
</style>